<template>
  <div class="container">
    <u-navbar
      class="custom-navbar"
      title="修改确认"
      :title-bold="false"
    ></u-navbar>
    <div class="content">
      <scroll-view style="height: 100%" scroll-y>
        <div class="content-card">
          <cell label="订车人姓名" :value="orderInfo.bookerName" />
          <cell label="订车人手机号" :value="orderInfo.bookerPhone" />
          <cell label="修改时间" :value="orderInfo.updateTime" />
          <cell label="修改内容" layout="vertical">
            <div class="modify-list">
              <div
                class="modify-item"
                v-for="(item, index) in showList"
                :key="index"
              >
                <div class="modify-item-label">{{ item.label }}：</div>
                <div class="modify-item-content">
                  <div class="diff-item">
                    <div class="diff-item-label">原：</div>
                    <div class="diff-item-content">
                      {{ oldInfo[item.valueKey] || "-" }}
                    </div>
                  </div>
                  <div class="diff-item">
                    <div class="diff-item-label">新：</div>
                    <div class="diff-item-content">
                      {{ newInfo[item.valueKey] || "-" }}
                    </div>
                  </div>
                </div>
                <u-line
                  v-if="index != showList.length - 1"
                  color="#E1E1E1FF"
                  margin="24rpx 0"
                />
              </div>
            </div>
          </cell>
        </div>
      </scroll-view>
    </div>
    <div class="bottom-box">
      <u-button
        type="primary"
        :customStyle="{
          background: '#FF874FFF',
          width: '100%',
        }"
        :loading="okLoading"
        @click="onSubmitClick"
        >确认修改</u-button
      >
    </div>
    <!-- toast -->
    <u-toast ref="uToast" />
  </div>
</template>
<script>
import { getUpdateInfo, saveUpdateInfo } from "@/api/qccx";
import cell from "./components/cell.vue";
export default {
  data() {
    return {
      okLoading: false,
      orderInfo: {},
      oldInfo: {},
      newInfo: {},

      form: {},
    };
  },
  components: {
    cell,
  },
  methods: {
    /**
     * 根据订单详情初始化表单
     */
     initForm(result) {
      this.form.id = result.id
      // 费用相关
      this.form.agreeType = result.orderInfo.agreeType
      this.form.agreeTypeName = result.orderInfo.agreeTypeName
      this.form.initBasePrice = result.orderInfo.initBasePrice //原基础费用
      this.form.initBaseAmount = result.orderInfo.initBaseAmount //原基础总价
      this.form.discount = result.orderInfo.discount // 企业折扣
      this.form.discountAmount = result.orderInfo.discountAmount // 企业折扣总价
      this.form.baseAmount = result.orderInfo.baseAmount // 现基础费用
      this.form.feeList = result.orderInfo.feeList
      // 服务商费用信息
      if ([20, 30].includes(result.status)) {
        // 服务商对象信息
        const providerOrder = result.providerOrderInfo
        this.form.providerCityCode = providerOrder.cityCode
        this.form.providerProductType = providerOrder.productType
        this.form.providerModelGroupId = providerOrder.modelGroupId
        this.form.providerBasePrice = providerOrder.basePrice
        this.form.providerBaseAmount = providerOrder.baseAmount
        this.form.providerFeeList = providerOrder.feeList
        // 处理司机信息
        const driverInfo = result.driverInfo || {}
        this.form.driverName = driverInfo.driverName
        this.form.driverPhone = driverInfo.driverPhone
        this.form.licenseNo = driverInfo.licenseNo
        this.form.brandShow = driverInfo.brandShow
        this.form.seriesId = driverInfo.seriesId
        this.form.seriesName = driverInfo.seriesName
        this.form.brandName = driverInfo.brandName
      }
    },
    onSubmitClick() {
      this.okLoading = true
      saveUpdateInfo(this.form).then((res) => {
        if (res.code == 200) {
          this.$refs.uToast.show({ 
            title: "操作成功",
            back: true,
            callback: () => {
              uni.$emit('success')
            },
          });
        }
      }).catch(() => {
        this.okLoading = false
      })
    }
  },
  computed: {
    showList() {
      // 全部可能会显示的字段
      const totalKey = [
        { label: "产品类型", valueKey: "productTypeName" },
        { label: "上车地点/机场", valueKey: "startAddress" },
        { label: "下车地点/机场", valueKey: "endAddress" },
        { label: "上车时间", valueKey: "expectStartTimeStr" },
        { label: "下车时间", valueKey: "expectEndTimeStr" },
        { label: "是否需要举牌", valueKey: "liftBoardName" },
        { label: "举牌内容", valueKey: "boardContent" },
        { label: "中途停靠", valueKey: "expectWaypointInfo" },
        { label: "包日天数", valueKey: "useDay" },
        { label: "航班号", valueKey: "flightNumber" },
        { label: "乘车人信息", valueKey: "userInfo" },
        { label: "是否短信通知乘车人", valueKey: "userSendMsgName" },
        { label: "备注", valueKey: "remark" },
      ];
      // 过滤后需要显示的字段
      let temp = [...totalKey];
      // 提取全部的keys
      const oldKeys = Object.keys(this.oldInfo);
      const newKeys = Object.keys(this.newInfo);
      const allKeys = [...oldKeys, ...newKeys];
      return temp.filter((item) => allKeys.includes(item.valueKey));
    },
  },
  onLoad(options) {
    const id = options.id;
    getUpdateInfo({ id: id }).then((res) => {
      const result = res.result;
      this.oldInfo = result.oldInfo;
      this.newInfo = result.newInfo;
      this.orderInfo = {
        ...result,
        providerOrder: result.providerOrderInfo,
      };

      this.initForm(result);
    });
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  .custom-navbar {
    flex-shrink: 0;
  }
  .content {
    flex: 1;
    overflow: hidden;
    padding: 24rpx;
    .content-card {
      background: #ffffff;
      box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201, 205, 216, 0.1265);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 32rpx;
      .modify-list {
        background: #f8fafc;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        padding: 24rpx;
        text-align: left;
        .modify-item {
          .modify-item-label {
            height: 44rpx;
            line-height: 44rpx;
            font-size: 28rpx;
            color: #1a1a1a;
          }
          .modify-item-content {
            .diff-item {
              line-height: 44rpx;
              display: flex;
              font-size: 28rpx;
              margin-top: 16rpx;
              .diff-item-label {
                flex-shrink: 0;
                color: #767676;
              }
              .diff-item-content {
                flex: 1;
                color: #1a1a1a;
              }
            }
          }
        }
      }
    }
  }
  .bottom-box {
    position: relative;
    width: 100%;
    height: 128rpx;
    flex-shrink: 0;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0rpx -20rpx 28rpx 0rpx rgba(220, 223, 233, 0.16);
  }
}
</style>
